<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>购物车</title>
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<script src="//unpkg.com/vue/dist/vue.js"></script>
		<script src="//unpkg.com/element-ui@2.12.0/lib/index.js"></script>
		<link rel="stylesheet" type="text/css" href="//unpkg.com/element-ui@2.12.0/lib/theme-chalk/index.css" />
		<style>
			ul {}

			.dotted {
				padding: 0.125rem;
				border: 1px dashed transparent;
				background: linear-gradient(white, white) padding-box, repeating-linear-gradient(-45deg, #FF540F 0, #FF540F 0.25em, white 0, white 0.75em)
			}

			.botText {
				font-family: HiraginoSansGB;
				font-weight: normal;
				color: rgba(255, 255, 255, 1);
				opacity: 0.25;
				height: 1.5rem;
				line-height: 1.5rem;
			}

			.el-checkbox__input.is-checked .el-checkbox__inner {
				background-color: #F44336;
				border-color: #F44336;
			}

			.el-checkbox__inner {
				border: 1px solid #F44336;
			}
		</style>
	</head>
	<body>
		<!-- 最顶部 -->
		<div id="top">
			<div class="leftAndRight" id="topContent">
				<div class="divRow divColumnCenter">
					<img src="img/home1.png" />
					<span>您好，欢迎来到村里村外~</span>
				</div>
				<div class="divRow divColumnCenter">
					<a href="#">登录</a>
					<a class="divColumnCenter" href="#">
						<img src="img/home2.png" />
						<span>注册</span>
					</a>
					<a href="#">我们的村子</a>
					<a href="#">手机版</a>
					<a href="#">关注村子</a>
					<a class="divColumnCenter" href="#">
						<span>村委会/社区</span>
					</a>
				</div>
			</div>
		</div>
		<!-- 顶部 -->
		<div style="width: 100%;" class="divCenter" id="content">
			<div style="width: 75rem;" class="divColumn">
				<!-- 顶部标题及搜索 -->
				<div style="width: 100%;height: 6.25rem;" class="leftAndRight">

					<div class="divRow divColumnCenter">
						<img src="img/logo.png" />
						<h2 style="margin-left: 1.25rem;">购物车</h2>
					</div>
					<div style="width:25rem;height: 2.625rem;" class="divRow">
						<input style="width: 70%;height: 100%;border: 0.0625rem solid #007D36;padding: 0rem 0.625rem;" />
						<span style="width: 30%;height: 104%;background: #007D36;line-height: 2.625rem;text-align: center;color: white;">
							搜索
						</span>
					</div>
				</div>
				<!-- 顶部标题切换 -->
				<div style="width: 100%;height: 3rem;" class="leftAndRight">
					<div style="width: 26.25rem;height: 100%;" class="divRow divColumnCenter" id="carTabTitle">
						<div style="width: 8.75rem;height: 100%;color: #FF5516;" class="divCenter">
							<a href="#">
								<h3 style="color: #FF5516;">全部商品(7)</h3>
							</a>
						</div>
						<div style="width: 0.0625rem;height: 0.9375rem;background:#CCCCCC ;"></div>
						<div style="width: 8.75rem;height: 100%;color: #FF5516;" class="divCenter">
							<a href="#">
								<h3>降价商品(0)</h3>
							</a>
						</div>
						<div style="width: 0.0625rem;height: 0.9375rem;background:#CCCCCC ;"></div>
						<div style="width: 8.75rem;height: 100%;color: #FF5516;" class="divCenter">
							<a href="#">
								<h3>库存紧张(0)</h3>
							</a>
						</div>


					</div>
					<div style="height: 100%;" class="divRow divColumnCenter">
						<span>已选商品（不含运费）</span>
						<span style="color: #FF5516;margin-left: 0.625rem;margin-right: 0.625rem;">0.00</span>
						<span style="height: 2rem;width: 3.75rem;background: #007D36;color: white;line-height: 2rem;text-align: center;cursor: pointer;"
						 id="count">结算</span>
					</div>
				</div>
				<div style="width: 100%;height: 0.0625rem;" class="divRow">
					<div style="width: 8.725rem;background: #FF5516;"></div>
					<div style="width: 8.725rem;background: #CCCCCC;"></div>
					<div style="width: 8.725rem;background: #CCCCCC;"></div>
					<div style="width: 48.75rem;height: 0.0625rem;background: #CCCCCC;"></div>
				</div>
				<!-- 购物车列表 -->
				<div style="width: 100%;height: 5rem;;color: black;font-size: 0.875rem" class="divRow divColumnCenter">
					<div style="width: 50%;height: 100%;padding-left: 0.625rem;" class="divRow divColumnCenter">
						<div class="divRow divColumnCenter">
							<el-checkbox v-model="isChoic" @change='choiceAll()'></el-checkbox>
							<span style="margin-left: 0.375rem;">全选</span>
						</div>
						<span style="margin-left: 3.75rem;">商品信息</span>
					</div>
					<div style="width: 50%;height: 100%;" class="divRow divColumnCenter">
						<div style="width: 20%;" class="divCenter">
							<span>单价</span>
						</div>
						<div style="width: 20%;" class="divCenter">
							<span>数量</span>
						</div>
						<div style="width: 30%;" class="divCenter">
							<span>金额</span>
						</div>
						<div style="width: 30%;" class="divCenter">
							<span>操作</span>
						</div>
					</div>
				</div>
				<!-- 购物车；列表 -->
				<ul style="margin-bottom: 1.25rem;" v-loading="loading">
					<li v-for="(item,index) in carList">
						<div style="width: 100%;height: 7.5rem;border: 0.0625rem solid #F0F0F0;margin-top: 0.625rem;" class="divRow divColumnCenter">
							<div style="width: 50%;height: 100%;" class="divRow">
								<div style="margin: 0.9375rem;">
									<el-checkbox v-model="item.checked"></el-checkbox>
								</div>
								<div style="margin-top: 0.9375rem;">
									<img src="https://img14.360buyimg.com/n7/jfs/t1/54171/5/821/168840/5ce88e7dEa4fea7b3/ef4e751191e9bb33.jpg"
									 style="width: 5.625rem;height: 5.625rem;" />
								</div>
								<div style="margin-top: 0.75rem;width: 10rem;margin-left: 0.625rem;">
									<span>来伊份牛肉豆干250g卤汁豆腐干素食豆脯休闲零食小吃小包装来一份</span>
								</div>
								<div style="width: 12.5rem;height:5.6rem;margin-left: 0.625rem;margin-top: 0.625rem;position: relative;" class="dotted">
									<div style="width:3rem;height: 1.875rem;background: #FF540F;color: white;position: absolute;right: -0.125rem;top: -0.125rem;"
									 class="divCenter">修改</div>
									<ul>
										<li>
											<span style="margin: 0.625rem;color: #999;">口味：麻辣味</span>

										</li>

									</ul>

								</div>

							</div>
							<div style="width: 50%;height: 100%;" class="divRow">
								<div style="width: 20%;height: 100%;" class="divColumn divCenter">
									<span style="text-decoration: line-through;color: #808080;">¥520.00</span>
									<span style="color: black;">¥320.00</span>
								</div>

								<div style="width: 24%;height: 100%;" class="divCenter">
									<!-- 			<div style="width: 6.875rem;height: 1.875rem;border: 0.0625rem solid #F0F0F0;" class="leftAndRight">

										<div style="width: 2.5rem;" class="divCenter">
											<img src="img/home19.png" />
										</div>
										<span>8</span>
										<div style="width: 2.5rem;" class="divCenter">
											<img src="img/home20.png" />
										</div>
									</div> -->
									<template>
										<el-input-number v-model="item.num" @change="handleChange(index)" :min="1" :max="100" label="描述文字"></el-input-number>
									</template>

								</div>

								<div style="width: 28%;height: 100%;" class="divCenter">
									<span style="color: #FF5516;font-size: 1.125rem;font-weight: 600;">¥520.00</span>
								</div>

								<div style="width: 28%;height: 100%;" class="divColumn divRowCenter" id="done">
									<a href="#">
										<h4>移入收藏夹</h4>
									</a>
									<a href="#">
										<h4>删除</h4>
									</a>
									<a href="#">
										<h4>相似宝贝</h4>
									</a>
								</div>
							</div>

						</div>

					</li>

				</ul>
				<!-- 底部结算 -->
				<div style="width: 100%;height: 3.75rem;background: #E5E5E5;margin-bottom: 1.25rem;" class="leftAndRight">

					<div class="divRow divColumnCenter">
						<div style="margin-left: 1.125rem;" class="divColumnCenter">
							<el-checkbox v-model="isChoic" @change='choiceAll()'></el-checkbox>
							<span style="margin-left: 0.625rem;">全选</span>
						</div>
						<span style="margin-left: 1.25rem;margin-right: 1.25rem;">删除</span>
						<span>移入收藏夹</span>
					</div>


					<div class="divRow divColumnCenter" style="font-weight: 600;">
						<span>已选商品<span style="color: #FF5516;">1</span></span>
						<span style="margin-left: 1.25rem;margin-right: 1.25rem;">合计（不含运费）：<span style="color: #FF5516;font-size: 1rem;">¥520.00</span></span>
						<div style="width: 6.25rem;height: 3.75rem;background: #007D36;color: white;font-size: 1rem;cursor: pointer;"
						 class="divCenter" id="count2">
							结 算
						</div>
					</div>


				</div>
			</div>
		</div>
		<!-- 底部介绍 -->
		<div style="width: 100%;15rem;background: #282633;height: 22.5rem;" class="divCenter">
			<div style="width: 75rem;height: 100%;" class="divColumn">
				<div style="width: 100%;height: 70%;" class="divRow">
					<div style="width: 60%;height: 100%;" class="divColumn">
						<div style="width: 100%;color: white;height: 3.25rem;" class="divRow divColumnCenter">
							<h3 style="width: 20%;;">公司介绍</h3>
							<h3 style="width: 20%;">购物指南</h3>
							<h3 style="width: 20%;">支付方式</h3>
							<h3 style="width: 20%;">售后服务</h3>
							<h3 style="width: 20%;">商家服务</h3>
						</div>
						<div style="height: 0.0625rem;background: #000000;width: 100%;"></div>
						<div style="width: 100%;margin-top: 0.875rem;" class="divRow">
							<div style="width: 20%;" class="divColumn">
								<span class="botText">关于村里村外</span>
								<span class="botText">企业荣誉</span>
								<span class="botText">战略合作</span>
								<span class="botText">媒体报道</span>
								<span class="botText">企业风采</span>
								<span class="botText">联系我们</span>
							</div>
							<div style="width: 20%;" class="divColumn">
								<span class="botText">免费注册</span>
								<span class="botText">购物流程</span>
								<span class="botText">发票制度</span>
								<span class="botText">配送说明</span>
								<span class="botText">联系客服</span>
							</div>
							<div style="width: 20%;" class="divColumn">
								<span class="botText">网上支付</span>
							</div>
							<div style="width: 20%;" class="divColumn">
								<span class="botText">验货与拒收政策</span>
								<span class="botText">退换货流程</span>
								<span class="botText">退款流程</span>
							</div>
							<div style="width: 20%;" class="divColumn">
								<span class="botText">招商范围</span>
								<span class="botText">商家资质要求</span>
								<span class="botText">入驻流程</span>
								<span class="botText">商家后台</span>
							</div>
						</div>

					</div>
					<div style="width: 40%;height: 100%;" class="divRow">
						<div style="margin: 1.25rem;">
							<img src="img/home17.png" />
						</div>
						<div style="margin:1.25rem 0rem;width: 60%;" class="divColumn">
							<span style="width: 60%;text-align: end;" class="botText">二十四小时咨询热线</span>
							<h1 style="color: white;">021-12454563</h1>
							<div class="divRow" style="margin-top: 0.625rem;">
								<div class="divColumn" style="width: 40%;" class="divColumn divCenter">
									<img src="img/home18.png" style="width: 100%;" />
									<span class="botText" style="text-align: center;">手机APP</span>
								</div>
								<div style="width: 10%;"></div>
								<div class="divColumn" style="width: 40%;" class="divColumn divCenter">
									<img src="img/home18.png" style="width: 100%;" />
									<span class="botText" style="text-align: center;">微信公众号</span>

								</div>
							</div>
						</div>
					</div>
				</div>
				<div style="width: 100%;height: 0.0625rem;background: black;"></div>
				<div style="width: 100%;margin-top: 1.25rem;" class="divColumn">
					<h2 style="color: white;">湖南村里村外电子商务有限公司</h2>
					<div class="divRow divColumnCenter" style="height: 2.625rem;">
						<span class="botText">湖南长沙市XXXXXXX栋XX单元</span>
						<span class="botText" style="margin-left: 2.5rem;">Tel:05456-46546545</span>
						<span class="botText" style="margin-left: 2.5rem;">E-mail:564564654@qq.com</span>

					</div>


				</div>

			</div>


		</div>

		<script src="js/jquery-2.1.4.js"></script>
		<script>
			var content = new Vue({
				el: '#content',
				data: {
					carList: [{
						num: 1,
						checked: false
					}, {
						num: 1,
						checked: false
					}, {
						num: 1,
						checked: false
					}, {
						num: 1,
						checked: false
					}, {
						num: 1,
						checked: false
					}, {
						num: 1,
						checked: false
					}, {
						num: 1,
						checked: false
					}, {
						num: 1,
						checked: false
					}],
					loading: false,
					isChoic: true
				},
				created: function() {
					var this_ = this;




				},
				methods: {
					handleChange(value) {
						console.log(value);
					},
					choiceAll() {

					}

				}
			});
			$('#count').click(function() {
				window.location.href = 'sureOrder.html';

			});
			$('#count2').click(function() {
				window.location.href = 'sureOrder.html';

			});
		</script>




	</body>
</html>
